<template>
    <common-dialog ref='mobile' :width="570" class="mobile">
        <template #title>
            <span class="title">移动端权限</span>
        </template>
        <template #body>
            <div class='clearfix'>
                <div class='mobilePermission'>
                    <el-form :model="mobileForm" ref="mobileForm" label-width="120px" size="mini">
                        <el-form-item label="工单">
                            <el-select v-model="mobileForm.project.opt">
                                <el-option v-for="item in mobileInfo.project.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="mobileForm.project.opt == 'part'">
                            <el-select v-model="mobileForm.project.child" multiple @change="childChange($event,'project')" ref="project"
                                value-key="permCode">
                                <el-option v-for="item in mobileInfo.project.children" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务">
                            <el-select v-model="mobileForm.task.opt">
                                <el-option v-for="item in mobileInfo.task.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="mobileForm.task.opt == 'part'">
                            <el-select v-model="mobileForm.task.child" multiple @change="childChange($event,'task')" ref="task">
                                <el-option v-for="item in mobileInfo.task.children" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报工">
                            <el-select v-model="mobileForm.output.opt">
                                <el-option v-for="item in mobileInfo.output.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="mobileForm.output.opt == 'part'">
                            <el-select v-model="mobileForm.output.child" multiple @change="childChange($event,'output')" ref="output">
                                <el-option v-for="item in mobileInfo.output.children" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="快捷键">
                            <el-select v-model="mobileForm.nimble.opt">
                                <el-option v-for="item in mobileInfo.nimble.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="mobileForm.nimble.opt == 'part'">
                            <el-select v-model="mobileForm.nimble.child" multiple @change="childChange($event,'nimble')" ref="nimble">
                                <el-option v-for="item in mobileInfo.nimble.children" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="看板">
                            <el-select v-model="mobileForm.dashboard.opt">
                                <el-option v-for="item in mobileInfo.dashboard.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="个人">
                            <el-select v-model="mobileForm.user.opt">
                                <el-option v-for="item in mobileInfo.user.options" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="mobileForm.user.opt == 'part'">
                            <el-select v-model="mobileForm.user.child" multiple @change="childChange($event,'user')" ref="user">
                                <el-option v-for="item in mobileInfo.user.children" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </template>
        <template #footer class='btn'>
            <el-button size="mini" @click="$refs.mobile.closeDialog()">取 消</el-button>
            <el-button type="primary" size="mini" @click="confirmPermission">确 定</el-button>
        </template>
    </common-dialog>
</template>

<script>
    import {
        editPermissions,
        permissionsList
    } from '@/api/userController'
    import commonDialog from '../components/dialog.vue'
    import permMenuList from './permMenuList'
    export default {
        data() {
            return {
                userId:'',
                mobileForm: {
                    project:{
                        opt:'all',
                        child:['project.revert','project.modify','project.end','project.start','project.quick','project.readonly']
                    },
                    task:{
                        opt:'all',
                        child:['task.adjustment','task.distribution','task.pick.up.cancel','task.quick','task.readonly']
                    },
                    output:{
                        opt:'all',
                        child:['output.agent','output.approval','output.delete','output.modify','output.query']
                    },
                    nimble:{
                        opt:'all',
                        child:['nimble.project.add','nimble.production.task','nimble.output.add',
                                'nimble.todady.yield',
                                'nimble.todady.output',
                                'nimble.today.defects',
                                'nimble.sales',
                                'nimble.stock.in',
                                'nimble.stock.out',
                                'nimble.stock.amount',
                                'nimble.info'
                            ]
                    },
                    dashboard:{
                        opt:'all',
                        child:[]
                    },
                    user:{
                        opt:'all',
                        child:['user.about.motone','user.change.password','user.configuration.wizard']
                    }
                },
                mobileInfo:{
                    project:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'part',
                                label:'部分权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[
                            {
                                value:'project.revert',
                                label:'撤回'
                            },
                            {
                                value:'project.modify',
                                label:'修改'
                            },
                            {
                                value:'project.end',
                                label:'结束'
                            },
                            {
                                value:'project.start',
                                label:'开始'
                            },
                            {
                                value:'project.quick',
                                label:'操作'
                            },
                            {
                                value: 'project.readonly',
                                label: "工单只读"
                            }
                        ]
                    },
                    task:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'part',
                                label:'部分权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[
                            {
                                value:'task.adjustment',
                                label:'调整'
                            },
                            {
                                value:'task.quick',
                                label:'操作'
                            },
                            {
                                value:'task.distribution',
                                label:'分配'
                            },
                            {
                                value:'task.pick.up.cancel',
                                label:'领取/取消',
                            },
                            {
                                value: 'task.readonly',
                                label: "任务只读"
                            }
                        ]
                    },
                    output:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'part',
                                label:'部分权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[
                            {
                                value:'output.agent',
                                label:'代报工'
                            },
                            {
                                value:'output.approval',
                                label:'审批'
                            },
                            {
                                value:'output.delete',
                                label:'删除'
                            },
                            {
                                value:'output.modify',
                                label:'修改'
                            },
                            {
                                value:'output.query',
                                label:'查看'
                            }
                        ]
                    },
                    nimble:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'part',
                                label:'部分权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[
                            {
                                value:'nimble.project.add',
                                label:'新建工单'
                            },
                            {
                                value:'nimble.production.task',
                                label:'生产任务'
                            },
                            {
                                value:'nimble.output.add',
                                label:'新建报工'
                            },
                            {
                                value:'nimble.todady.yield',
                                label:'今日产量'
                            },
                            {
                                value:'nimble.todady.output',
                                label:'今日报工'
                            },
                            {
                                value:'nimble.today.defects',
                                label:'今日不良'
                            },
                            {
                                value:'nimble.sales',
                                label:'销售订单'
                            },
                            {
                                value:'nimble.stock.in',
                                label:'入库单'
                            },
                            {
                                value:'nimble.stock.out',
                                label:'出库单'
                            },
                            {
                                value:'nimble.stock.amount',
                                label:'库存余额'
                            },
                            {
                                value:'nimble.info',
                                label:'个人'
                            },
                        ]
                    },
                    dashboard:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[]
                    },
                    user:{
                        options:[
                            {
                                value:'all',
                                label:'全部权限'
                            },
                            {
                                value:'part',
                                label:'部分权限'
                            },
                            {
                                value:'no',
                                label:'没有权限'
                            }
                        ],
                        children:[
                            {
                                value:'user.about.motone',
                                label:'关于默通'
                            },
                            {
                                value:'user.change.password',
                                label:'修改密码'
                            },
                            {
                                value:'user.configuration.wizard',
                                label:'配置向导'
                            }
                        ]
                    },
                },
            }
        },
        components: {
            commonDialog
        },
        methods: {
            switchOn(id) {
                this.userId = id
                this.getPermissionsListMobile({
                    userId:id,
                    type:1
                })
            },
            //确定
            confirmPermission() {
                const jsonForm = JSON.parse(JSON.stringify(this.mobileForm))
                for (const key in jsonForm) { //将没有权限的数组置空
                    if(key != 'dashboard' && jsonForm[key].opt == 'no'){
                        jsonForm[key].child = []
                    }
                }
                for (const perKey in permMenuList) { //blPerm --- true ---有权限    blPerm --- false ---无权限
                    for(const formKey in jsonForm){
                        if(perKey === formKey){
                            permMenuList[perKey].forEach(i => {
                                if(formKey === 'dashboard'){
                                    i.blPerm = jsonForm[formKey].opt === 'all'
                                }else{
                                    if(jsonForm[formKey].opt === 'part'){ //部分权限
                                        i.blPerm = jsonForm[formKey].child.includes(i.permCode)
                                    }else{
                                        i.blPerm = jsonForm[formKey].opt === 'all'   //全部或没有权限   都为true || false
                                    }
                                }
                            })
                        }
                    }
                }
                const data = {
                    id: this.userId,
                    menuIds:JSON.stringify(permMenuList),
                    type: 1
                }
                this.getEditPermissionsMobile(data)
            },
            //权限配置下拉框改变
            childChange(val,moudle){
                let targetLength = this.mobileInfo[moudle].children.length
                if(val.length === targetLength){
                    this.$refs[moudle].blur()
                    setTimeout(() => { //暂时性解决 下拉框隐藏错位问题
                        this.mobileForm[moudle].opt = 'all'
                    }, 100);
                }else if(val.length === 0){
                    this.$refs[moudle].blur()
                    this.mobileForm[moudle].opt = 'no'
                }
            },
            //获取权限列表
            getPermissionsListMobile(data) {
                permissionsList(data).then(res => {
                    if (res.code == 200) {
                        const menu = JSON.parse(res.data.menu)
                        for (const formKey in this.mobileForm) {
                            for (const menuKey in menu) {
                                if(formKey === menuKey){
                                    if(formKey === 'dashboard'){
                                        this.mobileForm[formKey].opt = menu[menuKey][0].blPerm ? 'all' : 'no'
                                    }else{
                                        let filterArr = []
                                        if(menu[menuKey].every(i => i.blPerm)){ //全部权限
                                            this.mobileForm[formKey].opt = 'all'
                                        }else if(menu[menuKey].every(i => !i.blPerm)){ //没有权限
                                            this.mobileForm[formKey].opt = 'no'
                                        }else { //部分权限
                                            this.mobileForm[formKey].opt = 'part'
                                            filterArr = menu[menuKey].filter(i => i.blPerm)
                                            this.mobileForm[formKey].child = filterArr.map(i => i.permCode)
                                        }
                                    }
                                }
                            }
                        }
                        this.$refs.mobile.openDialog()
                    }
                })
            },
            //编辑移动端权限
            getEditPermissionsMobile(data) {
                editPermissions(data).then(res => {
                    if (res.code == 200) {
                       this.utils.showMsg('权限修改成功', 'success')
                       this.$refs.mobile.closeDialog()
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .mobile {
        .mobilePermission {
            border: 1px solid #edeef3;
            padding: 20px 80px 20px 40px;
            max-height: 450px;
            overflow-y: auto;
            background: #fbfbfb;
        }

    }
</style>